<template>
  <view class="mb-[24rpx]">
    <view class="mb-[8rpx] text-[30rpx] text-gray-700">
      <text v-if="required" class="text-red-500 mr-[6rpx]">*</text>{{ label }}
    </view>
    <slot />
    <view v-if="errorText" class="text-[26rpx] text-red-500 mt-[6rpx]">{{ errorText }}</view>
  </view>
  
</template>

<script setup lang="ts">
import { computed, inject, onMounted, watch } from 'vue'

interface Props {
  prop: string
  label: string
  required?: boolean
}

const props = defineProps<Props>()

const form = inject<any>('simpleFormCtx')

const errorText = computed(() => (form ? form.getError(props.prop) : ''))

function validate() {
  form?.validateField(props.prop)
}

onMounted(() => {
  // 初次挂载不自动校验
})

defineExpose({ validate })

watch(
  () => props.required,
  () => validate()
)
</script>

<style scoped>
</style>

